<template>
    <yd-layout>
      <yd-navbar slot="navbar" title="NavBar" >
        <router-link to="#" slot="left">
          <yd-navbar-back-icon></yd-navbar-back-icon>
        </router-link>
        <router-link to="#" slot="right">
          <yd-icon name="more" ></yd-icon>
        </router-link>
      </yd-navbar>
     <!--中间内容-->
      <yd-list theme="2">
        <yd-list-item v-for="(item,index) in list" :key="index">
          <img slot="img" :src="item.img">
          <span slot="title">{{item.title}}</span>
          <yd-list-other slot="other">
            <div>
              <span class="list-price"><em>¥</em>{{item.price}}</span>
              <span class="list-del-price">¥{{item.w_price}}</span>
            </div>
            <div>
              <yd-rate size="5px" padding="1px" :value="item.count" :readonly="true"></yd-rate>
            </div>
          </yd-list-other>
        </yd-list-item>
      </yd-list>
      <!--结束-->
      <yd-tabbar slot="tabbar" >
        <yd-tabbar-item title="首页" link="">
          <yd-icon name="home" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="购物车" link="/">
          <yd-icon name="shopcart-outline" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="个人中心" link="/input">
          <yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="图片" link="#">
          <img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
        </yd-tabbar-item>
      </yd-tabbar>
    </yd-layout>
</template>

<script>
import Vue from 'vue';
import {TabBar, TabBarItem} from 'vue-ydui/dist/lib.rem/tabbar';
import {Icons} from 'vue-ydui/dist/lib.rem/icons';
import {Layout} from 'vue-ydui/dist/lib.rem/layout';
import {NavBar, NavBarBackIcon, NavBarNextIcon} from 'vue-ydui/dist/lib.rem/navbar';
import {FlexBox, FlexBoxItem} from 'vue-ydui/dist/lib.rem/flexbox';
import {ListTheme, ListItem, ListOther} from 'vue-ydui/dist/lib.rem/list';
import {Rate} from 'vue-ydui/dist/lib.rem/rate';
Vue.component('yd-list', ListTheme);
Vue.component('yd-list-item', ListItem);
Vue.component('yd-list-other', ListOther);
Vue.component('yd-tabbar', TabBar);
Vue.component('yd-tabbar-item', TabBarItem);
Vue.component('yd-icon', Icons);
Vue.component('yd-layout', Layout);
Vue.component('yd-navbar', NavBar);
Vue.component('yd-navbar-back-icon', NavBarBackIcon);
Vue.component('yd-navbar-next-icon', NavBarNextIcon);
Vue.component('yd-flexbox', FlexBox);
Vue.component('yd-flexbox-item', FlexBoxItem);
Vue.component('yd-rate', Rate);
export default {
  name: 'Init',
  data () {
    return {
      key: 'mm',
      rate7: 3,
      list: [
        {img: '//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg', title: '标题111标题标题标题标题', price: 156.23, w_price: 89.36, count: 3},
        {img: '//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg', title: '标题222标题标题标题标题', price: 256.23, w_price: 89.36, count: 5},
        {img: '//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg', title: '标题333标题标题标题标题', price: 356.23, w_price: 89.36, count: 2},
        {img: '//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg', title: '标题444标题标题标题标题', price: 456.23, w_price: 89.36, count: 1},
        {img: '//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg', title: '标题555标题标题标题标题', price: 556.23, w_price: 89.36, count: 3},
        {img: '//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg', title: '标题666标题标题标题标题', price: 656.23, w_price: 89.36, count: 4}
      ]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .list-price {
    font-size: .3rem;
    color: #EB5211;
  }

  .list-price >em {
    font-size: .22rem;
  }
  .list-del-price {
    padding-left: .06rem;
    font-size: .2rem;
    margin-left: .02rem;
    position: relative;
    color: #8C8C8C;
  }
</style>
